<!-- 聊天 -->
<template>
	<view>
		<view class="pageBox">
			<view class="topBox">
				<view class="status_bar"></view>
				<zdynav fromval="chat" :myavatar="yourInfo.avatar" :myname="yourInfo.nickname" :uid="yourInfo.uid">
				</zdynav>
			</view>
			<view class="centerBox">
				<scroll-view scroll-y="true" class="scrollStyle">
					<view>
						<view class="itemBox" v-for="(item,index) in pageData" :key="index">
							<view class="item" style="justify-content:flex-end;" v-if="item.from==myInfo.uid">
								<view class="txt">{{item.body}}</view>
								<image :src="myInfo.avatar" mode="" class="img" style="margin-left:16rpx;"></image>
							</view>
							<view class="item" v-else>
								<image :src="yourInfo.avatar" mode="" class="img" style="margin-right:16rpx;"></image>
								<view class="txt">{{item.body}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="bottomBox">
				<input type="text" v-model="value" class="ipt" confirm-type="send" @confirm="fasongFn">
			</view>
		</view>
		<!-- 弹窗 -->
		
	</view>
</template>

<script>
	import api from '@/commonJS/api.js';
	import common from '@/commonJS/common.js';
	export default {
		data() {
			return {
				prevPageData: '', //上个页面传的参数
				myInfo: '', //我的信息
				yourInfo: '', //你的信息
				pageData: [],
				value: '',
			}
		},
		onLoad(option) {
			console.log(option);
			this.prevPageData = option;
			this.myInfo = JSON.parse(uni.getStorageSync('userInfo'));
			console.log('我的信息', this.myInfo);
			this.getYourInfo();
			this.historyMsgs();
			this.shouFn();
		},
		methods: {
			//获取你的信息
			getYourInfo() {
				const obj = {
					uid: this.prevPageData.uid
				}
				const _this = this;
				common.ajaxFn(api.getUserInfoTwo, 'POST', obj).then((res) => {
					if (res) {
						console.log('你的信息', res.data.data.list);
						_this.yourInfo = res.data.data.list;
					}
				});
			},
			// 历史消息
			async historyMsgs() {
				const _this = this;
				const msgs = await getApp().globalData.globalNim.msgLog.getHistoryMsgs({
					scene: 'p2p',
					to: _this.prevPageData.uid,
					limit: 100,
				});
				console.log('历史消息', msgs);
				this.pageData = msgs.reverse();
			},
			// 收消息
			shouFn() {
				const _this = this;
				getApp().globalData.globalNim.on('msg', (msg) => {
					console.log('收到的消息', msg);
					_this.pageData.push(msg);
				});
			},
			// 发消息
			fasongFn() {
				const _this = this;
				if (this.value) {
					getApp().globalData.globalNim.msg.sendTextMsg({
						"scene": "p2p",
						"to": _this.prevPageData.uid,
						"body": _this.value,
						"onSendBefore": function(msg) {
							console.log('发送的消息', msg);
							_this.pageData.push(msg);
							_this.value = '';
						}
					});
				}
			}






		}
	}
</script>

<style lang="scss" scoped>
	.pageBox {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: #F5F5F5;
		display: grid;
		grid-template-rows: auto 1fr auto;

		.topBox {
			.status_bar {
				height: var(--status-bar-height);
				width: 100%;
			}
		}

		.centerBox {
			position: relative;

			.scrollStyle {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				.itemBox{
					padding: 40rpx 40rpx 0 40rpx;
					.item{
						display: flex;
						margin-bottom: 40rpx;
						.img{
							flex-shrink: 0;
							display: block;
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
						}
						.txt{
							padding: 20rpx 30rpx;
							background-color: #fff;
							border-radius: 24rpx;
						}
					}
				}
			}
		}

		.bottomBox {
			padding: 20rpx;

			.ipt {
				padding: 0 20rpx;
				height: 70rpx;
				background-color: #fff;
				border-radius: 35rpx;
			}
		}
	}
</style>